<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title>数据表格</title>
    <link href="../../component/layui/css/layui.css" rel="stylesheet" />
    <link href="../../admin/css/pearButton.css" rel="stylesheet"/>
    <link href="../../admin/css/pearCommon.css" rel="stylesheet"/>
    <link href="../../admin/css/pearTable.css" rel="stylesheet"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="javascript:void(0);">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="realName" id="date1" hover autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">账户</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" hover autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button type="submit" class="pear-btn pear-btn-md pear-btn-primary layui-icon layui-icon-search"  lay-submit="" lay-filter="select">&nbsp;查询</button>
                        <button type="reset" class="pear-btn pear-btn-md pear-btn-primary layui-icon layui-icon-refresh" plain>&nbsp;重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--视图布局-->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="dictTypeTable" lay-skin="line" lay-filter="dictTypeTable"></table>
    </div>
</div>

<!--头工具栏-->
<script type="text/html" id="toolbar">
    <button class="layui-icon layui-icon-add-1 pear-btn pear-btn-primary pear-btn-md"  lay-event="add">&nbsp;新增</button>
    <button class="layui-icon layui-icon-delete pear-btn pear-btn-danger pear-btn-md"  lay-event="del" >&nbsp;批量删除</button>
    <button class="layui-icon layui-icon-return pear-btn pear-btn-warming pear-btn-md"  lay-event="goBack" >&nbsp;返回</button>
</script>

<!--行工具栏-->
<script type="text/html" id="barDemo">
    <button class="layui-icon layui-icon-edit pear-btn pear-btn-primary pear-btn-sm"  lay-event="edit" />
    <button class="layui-icon layui-icon-list pear-btn pear-btn-warming pear-btn-sm"   lay-event="list" />
    <button class="layui-icon layui-icon-delete pear-btn pear-btn-danger pear-btn-sm"   lay-event="del" />
</script>

<!--字段格式化-->
<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ d.status == 0 ? 'checked' : '' }}>
</script>

<script type="text/html" id="createTime">
    <div> {{layui.util.toDateString(d.createTime, "yyyy-MM-dd")}} </div>
</script>

<!--逻辑脚本-->
<script src="../../component/layui/layui.js"></script>
<script>
    layui.use(['jquery','table','layer','form','operate'],function(){
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var operate = layui.operate;

        table.render({
            elem: '#dictTypeTable',
            url: '/system/dictData/data',
            page: true ,
            skin:'line',
            defaultToolbar: [{
                title: '刷新'
                ,layEvent: 'refresh'
                ,icon: 'layui-icon-refresh'
            },'filter', 'exports', 'print'],
            toolbar: "#toolbar",
            cols:[
                [
                    {type:  'checkbox'},
                    {field: 'name', title: '别名'},
                    {field: 'type', title: '标识'},
                    {field: 'status', title: '状态',templet:'#status'},
                    {field: 'createTime', title: '注册时间', templet:'#createTime'},
                    {title: '操作', width: 180, align: 'center', toolbar: '#barDemo'}
                ]
            ]
        });

        //头工具栏监听
        table.on('toolbar(dictTypeTable)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: '字典新增',
                        shadeClose: true,
                        shade: false,
                        area: ['850px', '550px'],
                        content: '/system/dictType/add'
                    });
                    break;

                case 'del':

                    var ids ='';
                    if(data.length>0){
                        for(var i=0;i<data.length;i++){
                            ids+=data[i].id + ',';
                        }
                        ids = ids.substr(0,ids.length-1);
                    }
                    //进行批量删除请求
                    $.ajax({
                        url:'/system/user/deleteByIds/'+ids,
                        type:'delete',
                        dataType:'json',
                        success:function(result){
                            if(result.code==200){
                                layer.msg(result.msg,{icon:1,time:1000},function(){
                                    $(".layui-form-checked").not(".header").parents("tr").remove();
                                })
                            }else{
                                layer.msg(result.msg,{icon:2,time:1000});
                            }
                        }
                    })
                    break;
                case 'refresh':
                    table.reload('dictTypeTable')
                    break;

                case 'goBack':
                    operate.goBack();
                    break;
            };
        });

        //行工具栏监听
        table.on('tool(dictTypeTable)', function(obj) {
            var data = obj.data, //获得当前行数据,
                event = obj.event; //获得 event 对应的值

            if (event === 'del') {
                layer.confirm('确定要删除该条数据嘛', function(index) {
                    $.ajax({
                        url:'/system/user/deleteById/'+data['id'],
                        dataType:'json',
                        type:'delete',
                        success:function(result){
                            if(result.code==200){
                                layer.msg(result.msg,{icon:1,time:1000},function(){
                                    obj.del();
                                    layer.close(index);
                                });
                            }else{
                                layer.msg(result.msg,{icon:2,time:1000});
                            }
                        }
                    })
                });
            } else if (event === 'edit') {
                layer.open({
                    type: 2,
                    title: '用户修改',
                    shadeClose: true,
                    shade: false,
                    area: ['850px', '550px'],
                    content: '/system/user/edit?id='+data['id']
                });
            } else if(event === 'list'){

                alert("弹出对应的数据字典值");
            }
        });

        //监听账号状态切换
        form.on('switch(status)', function(obj){
            if(obj.elem.checked){
                operate.put('/system/dictType/enable/'+obj.value,null,function(result){
                    console.log("开启");
                });
            }else{
                operate.put('/system/dictType/disable/'+obj.value,null,function(result){
                    console.log("关闭");
                });
            }
        });


        form.on('submit(select)', function(data){
            table.reload('userTable', {
                where: data.field
                ,page: {
                    curr: 1
                }
            });
        });

    })


</script>

</body>
</html>